<template>

  <div>
    <el-form
      ref="queryParams"
      :model="queryParams"
      label-width="68px"
      class="card_0"
    >
      <el-row :gutter="15">

        <el-col :span="8">
          <el-form-item label="车辆信息" prop="memberType">

            <el-cascader
              ref="posCascader"
              :props="casProps"
              clearable
              placeholder="请选择品牌/车系/车型"
              @change="brandChange"
              @expand-change="expandChange">
            </el-cascader>

          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="车牌号" prop="carNo">
            <el-input
              v-model="queryParams.carNo"
              placeholder="请输入车牌号"
              :maxlength="8"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label-width="0px">
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="ResetQuery"
              >重置</el-button
            >
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <div style="margin:0 0 10px;font-size: 13px;color: #333;">提示：仅支持企业在交管平台中绑定车辆的违章数据查询！</div>

    <el-table v-loading="loading" :data="list" height="300px" @selection-change="handleSelectionChange" row-key="carId" border>
      <el-table-column
        type="selection"
        width="75"
        align="center"
        :reserve-selection="true"
      />

      <el-table-column
        label="车辆信息"
        align="center"
        prop="carInfo"
        min-width="200"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        label="车牌号"
        align="center"
        prop="carNo"
        min-width="150"
        show-overflow-tooltip
      >
      </el-table-column>
      <el-table-column
        label="车架号"
        align="center"
        prop="vinNo"
        min-width="150"
        show-overflow-tooltip
      >
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <div class="bottom-layout">
      <template v-if="selList.length>0">
        <div style="margin-right:20px">已选{{selList.length}}辆</div>
        <el-button type="primary" size="mini" @click="queryIllegal">违章所选车辆查询</el-button>
      </template>
      <template v-else>
        <el-button type="primary" size="mini" @click="queryIllegal">查询全部车辆违章</el-button>
      </template>

        <el-button size="mini" @click="cancelQuery">取消</el-button>
    </div>

  </div>

</template>

<script>
import {
  getCarBrandList,
  getCarSeriesList,
  getCarModelList,
} from '@/api/car/model'
import { carBasicList, batchQueryillegal } from '@/api/car/car_basic'

export default {
  data() {
    return {
      loading: true,
      list: [],
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        carBrandId: null,
        carSeriesId: null,
        carModelId: null,
        carNo: null,
      },
      selList:[],
      casProps:{
        checkStrictly:true,
        lazy:true,
        lazyLoad(node, resolve){

          console.log('当前点击的节点', node)

          const { level } = node;

          if(level===0){
              getCarBrandList().then((response) => {
                const nodes1 = response.data.map(item => ({
                  value: item.brandId,
                  label: item.brandName,
                  leaf: false
                }));
                // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                resolve(nodes1);
              })


          }else if(level===1){
            getCarSeriesList(node.value).then((response) => {
              const nodes2 = response.data.map(item => ({
                value: item.seriesId,
                label: item.seriesName,
                leaf: false
              }));
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve(nodes2);

            })
          }else if(level===2){
            getCarModelList(node.value).then((response) => {
              const nodes3 = response.data.map(item => ({
                value: item.id,
                label: item.modelName,
                leaf: true
              }));
              // 通过调用resolve将子节点数据返回，通知组件数据加载完成
              resolve(nodes3);

            })
          }
        },
      },
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      carBasicList(this.queryParams).then((response) => {
        this.list = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    brandChange(value){
      console.log("brand change", value)
      this.queryParams.carBrandId = null
      this.queryParams.carSeriesId = null
      this.queryParams.carModelId = null

      if(value.length===3){
        this.queryParams.carBrandId = value[0];
        this.queryParams.carSeriesId = value[1];
        this.queryParams.carModelId = value[2];
      }else if(value.length===2){
        this.queryParams.carBrandId = value[0];
        this.queryParams.carSeriesId = value[1];
      }else if(value.length===1){
        this.queryParams.carBrandId = value[0];
      }
    },
    //在节点展开层级变化时修改input框中显示的文字（没有解决问题）
    expandChange(expandArr) {
      // const expandStr = expandArr.join("/");
      // this.$refs.posCascader.presentText = expandStr;
      // console.log("ref", this.$refs.posCascader);
    },
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList(this.queryParams);
    },
    ResetQuery() {
      this.resetForm("queryParams");
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        carBrandId: null,
        carSeriesId: null,
        carModelId: null,
        carNo: null,
      };
      this.handleQuery();
    },
    cancelQuery() {
      this.$emit("cancel", true);
    },

    handleSelectionChange(selection) {
      console.log("handleSelectionChange", selection);

      this.selList = selection.map((item) => item.carNo)
    },

    queryIllegal() {
        this.loading = true;
        batchQueryillegal(this.selList.join(",")).then((response) => {
          this.$message.success(response.msg)
          this.$emit("success", response);
        }).finally(res=>{
          this.loading = false;
        })
    },

  },
};
</script>

<style lang="scss" scoped>
  .bottom-layout{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 40px 0 0;
  }
</style>
